<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系客服</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 70px; /* 为底部任务栏留出空间 */
        }
        .container {
            max-width: 450px;
            margin: 0 auto;
            background-color: white;
            min-height: 100vh;
            padding: 20px;
        }
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        .back-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            margin-right: 20px;
        }
        h1 {
            text-align: center;
            flex: 1;
            color: #2c3e50;
            font-size: 22px;
        }
        .worker-info {
            margin-bottom: 30px;
            padding: 20px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
        }
        .worker-name {
            font-weight: bold;
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        .worker-detail {
            margin-bottom: 5px;
            font-size: 14px;
        }
        .customer-service {
            margin-bottom: 30px;
        }
        .service-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        .chat-container {
            height: 400px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 15px;
            background-color: #f8f9fa;
        }
        .message {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 20px;
            margin-bottom: 10px;
            word-break: break-word;
        }
        .message.bot {
            background-color: #e0e0e0;
            align-self: flex-start;
            border-top-left-radius: 5px;
        }
        .message.user {
            background-color: #3498db;
            color: white;
            margin-left: auto;
            border-top-right-radius: 5px;
        }
        .input-area {
            display: flex;
            gap: 10px;
        }
        .message-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            outline: none;
        }
        .send-btn {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
        }
        .phone-btn {            
            display: block;
            width: 100%;
            padding: 15px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        /* 自定义弹窗样式 */
        .phone-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 350px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            z-index: 1000;
            overflow: hidden;
        }
        .modal-content {
            padding: 30px 20px;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
        }
        .modal-phone {
            font-size: 24px;
            font-weight: bold;
            margin: 20px 0;
            color: #2c3e50;
        }
        .modal-buttons {
            display: flex;
        }
        .modal-btn {
            flex: 1;
            padding: 15px;
            border: none;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-cancel {
            background-color: #f5f5f5;
            color: #7f8c8d;
        }
        .btn-call {
            background-color: #2ecc71;
            color: white;
        }
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
        }
        /* 底部任务栏样式 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 450px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            z-index: 999;
            border-radius: 10px 10px 0 0;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #7f8c8d;
            text-decoration: none;
            font-size: 12px;
        }
        .nav-item.active {
            color: #3498db;
        }
        .nav-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <button class="back-btn" onclick="window.history.back()">&lt;</button>
            <h1>联系客服</h1>
        </div>

        <!-- 工作人员信息 -->
        <div class="worker-info">
            <div class="worker-name">工作人员信息</div>
            <div class="worker-detail">姓名：张三</div>
            <div class="worker-detail">工号：SF123456</div>
            <div class="worker-detail">联系方式：13800138000</div>
            <div class="worker-detail">当前状态：在线</div>
        </div>

        <!-- 客服聊天 -->
        <div class="customer-service">
            <div class="service-title">在线客服</div>
            <div class="chat-container" id="chatContainer">
                <div class="message bot">您好！我是客服小助手，请问有什么可以帮您的？</div>
            </div>
            <div class="input-area">
                <input type="text" class="message-input" id="messageInput" placeholder="输入您的问题...">
                <button class="send-btn" onclick="sendMessage()">发送</button>
            </div>
            <button class="phone-btn" onclick="callService()">
                <span>📞</span> 拨打官方客服电话
            </button>
        </div>
    </div>

    <!-- 电话拨打弹窗 -->
    <div class="modal-overlay" id="modalOverlay"></div>
    <div class="phone-modal" id="phoneModal">
        <div class="modal-content">
            <p>请确认拨打以下客服电话</p>
            <div class="modal-phone">400-123-4567</div>
            <p>客服工作时间: 9:00-18:00</p>
        </div>
        <div class="modal-buttons">
            <button class="modal-btn btn-cancel" onclick="closeModal()">返回</button>
            <button class="modal-btn btn-call" onclick="makeCall()">拨出</button>
        </div>
    </div>

    <!-- 底部任务栏 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <img src="img/1.jpg" class="nav-icon" alt="首页">
            <div class="nav-text">首页</div>
        </a>
        <a href="#" class="nav-item">
            <img src="img/2.jpg" class="nav-icon" alt="预约服务">
            <div class="nav-text">预约服务</div>
        </a>
        <a href="#" class="nav-item">
            <img src="img/3.jpg" class="nav-icon" alt="社区中心">
            <div class="nav-text">社区中心</div>
        </a>
        <a href="service-tracking.html" class="nav-item">
            <img src="img/4.jpg" class="nav-icon" alt="服务管理">
            <div class="nav-text">服务管理</div>
        </a>
        <a href="#" class="nav-item active">
            <img src="img/5.jpg" class="nav-icon" alt="个人中心">
            <div class="nav-text">个人中心</div>
        </a>
    </div>

    <script>
        // 发送消息
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            if (message) {
                const chatContainer = document.getElementById('chatContainer');
                // 添加用户消息
                const userMessage = document.createElement('div');
                userMessage.className = 'message user';
                userMessage.textContent = message;
                chatContainer.appendChild(userMessage);
                // 清空输入框
                input.value = '';
                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
                // 模拟AI回复
                setTimeout(() => {
                    const botMessage = document.createElement('div');
                    botMessage.className = 'message bot';
                    
                    // 简单的AI回复逻辑
                    const lowerMessage = message.toLowerCase();
                    if (lowerMessage.includes('你好') || lowerMessage.includes('您好')) {
                        botMessage.textContent = '您好！很高兴为您服务。请问有什么可以帮助您的吗？';
                    } else if (lowerMessage.includes('订单') || lowerMessage.includes('物流') || lowerMessage.includes('配送')) {
                        botMessage.textContent = '您可以在服务管理页面查看订单状态和物流信息。如果有具体订单问题，请提供订单号，我会帮您查询。';
                    } else if (lowerMessage.includes('取消') || lowerMessage.includes('退款')) {
                        botMessage.textContent = '如需取消订单或申请退款，请在订单详情页面操作，或拨打客服电话400-123-4567进行人工处理。';
                    } else if (lowerMessage.includes('投诉') || lowerMessage.includes('建议')) {
                        botMessage.textContent = '非常抱歉给您带来不便。您可以详细描述您的问题，我们会尽快处理并给您回复。';
                    } else if (lowerMessage.includes('再见') || lowerMessage.includes('谢谢')) {
                        botMessage.textContent = '不客气！如果您还有其他问题，随时欢迎咨询。祝您生活愉快！';
                    } else {
                        botMessage.textContent = '感谢您的咨询，我们会尽快处理您的问题。如有紧急情况，请拨打官方客服电话400-123-4567。';
                    }
                    
                    chatContainer.appendChild(botMessage);
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 1000);
            }
        }

        // 拨打客服电话
        function callService() {
            // 显示自定义弹窗
            document.getElementById('modalOverlay').style.display = 'block';
            document.getElementById('phoneModal').style.display = 'block';
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById('modalOverlay').style.display = 'none';
            document.getElementById('phoneModal').style.display = 'none';
        }

        // 拨打电话
        function makeCall() {
            alert('正在拨打官方客服电话：400-123-4567');
            // 实际应用中，可以使用tel:协议调用手机拨号功能
            // window.location.href = 'tel:4001234567';
            closeModal();
        }

        // 按Enter键发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>